<template>
  <div class="searchbox">
    <el-form ref="form" :model="form" label-width="80px">
      <el-form-item label="用户名称">
        <el-input v-model="form.name"></el-input>
      </el-form-item>
      <el-form-item label="手机号">
        <el-input v-model="form.phone"></el-input>
      </el-form-item>
      <el-form-item label="部门">
        <el-select v-model="form.depa" placeholder="请选择部门">
          <el-option label="电商部" value="电商部"></el-option>
          <el-option label="仓库部" value="仓库部"></el-option>
          <el-option label="客服部" value="客服部"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="创建时间">
        <el-col :span="11">
          <el-date-picker
            type="date"
            placeholder="选择日期"
            v-model="form.date1"
            style="width: 100%"
          ></el-date-picker>
        </el-col>
        <el-col class="line" :span="2">—</el-col>
        <el-col :span="11">
          <el-time-picker
            placeholder="选择时间"
            v-model="form.date2"
            style="width: 100%"
          ></el-time-picker>
        </el-col>
      </el-form-item>
      <div class="list-left">
        <el-button
          type="primary"
          round
          icon="el-icon-search"
          size="small"
          @click="handleSearch"
        >
          搜索</el-button
        >
        <el-button
          type="primary"
          round
          icon="el-icon-refresh-right"
          size="small"
          @click="handleReset"
        >
          重置</el-button
        >
      </div>
    </el-form>
  </div>
</template>

<script>
import _ from "lodash";
export default {
  name: "SearchComp",
  components: {},
  data() {
    return {
      form: {
        name: "",
        phone: "",
        depa: "",
        date1: "",
        date2: "",
      },
    };
  },
  methods: {
    // 点击搜索，向父组件传递表单数据
    handleSearch() {
      // console.log("点击搜索", this.form);
      this.$store.commit("searchForm/updatesearchForm", _.cloneDeep(this.form));
    },
    // 点击重置，清空表单数据
    handleReset() {
      this.form.name = "";
      this.form.phone = "";
      this.form.depa = "";
      this.form.date1 = "";
      this.form.date2 = "";
      this.$store.commit("searchForm/updatesearchForm", _.cloneDeep(this.form));
    },
  },
  mounted() {},
  // watch: {
  //   form: {
  //     deep: true, //对表单数据 的深度 监听
  //     handler(newValue, oldValue) {
  //       console.log("newValue", newValue);
  //       console.log("oldValue", oldValue);
  //     },
  //   },
  // },
};
</script>

<style scoped lang="scss">
.searchbox {
  width: 100%;
  height: 100%;
  background: #fff;
  margin-top: 20px;
  border-radius: 8px;
  display: flex;
}
.el-form {
  width: 100%;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  padding: 10px;
  box-sizing: border-box;
}
.el-form-item {
  margin-bottom: 10px;
}
.list-left {
  position: relative;
  top: -5px;
  left: 50px;
}
.line {
  display: flex;
  align-items: center;
}
:deep(.line) {
  display: flex;
  justify-content: center;
  align-items: center;
  // padding: 0px 4px;
}
// :deep(.el-form-item .el-input__inner) {
//   width: 50px;
// }
</style>
